<template>
  <div>
    <el-form class="demo-form-inline" :inline="true">
      <el-form-item label="角色名称">
        <el-input v-model="role_name" />
      </el-form-item>
    </el-form>
    <div style="margin-left: 30px">
      <!-- check-strictly="true" -->
      <el-tree
        ref="tree"
        :data="data"
        :default-checked-keys="checkedId"
        :default-expand-all="true"
        highlight-current
        node-key="id"
        :props="defaultProps"
        show-checkbox
        @check="handledeptNodeClick"
      />
    </div>
    <div style="margin-left: 40%">
      <el-button @click="goBack()">返回</el-button>
      <!-- <el-button @click="setCheckedNodes">查看选择机构</el-button> -->
      <el-button type="primary" @click="preservation">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {
    rolePermissionList,
    roleAdd,
    getUserRole,
  } from '@/api/roleManagement'
  // preservationList
  //
  export default {
    props: {
      datas: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'permission_name',
          id: 'id',
        },
        role_name: '',
        dataIds: [],
        checkedId: [],
        SelectId: [],
      }
    },
    watch: {
      dataIds: {
        deep: true, //深度监听
        handler: function () {
          // dosomething
        },
      },
      // datas: {
      //   deep: true, //深度监听
      //   handler: function (e, r) {
      //     console.log(e)
      //     console.log(r)
      //     this.checkedId = []
      //     this.role_name = ''
      //     this.init()
      //   },
      // },
      datas: {
        handler() {
          this.checkedId = []
          this.role_name = ''
          this.init()
        },
      },
    },

    mounted() {
      this.init()
      console.log(this.datas)
    },
    methods: {
      // 初始化 方法
      init() {
        rolePermissionList().then((res) => {
          this.data = res.data.permissions_arr
          if (this.datas.id) {
            const params = {
              id: this.datas.id,
            }
            getUserRole(params).then((res) => {
              this.role_name = res.data.role_name
              // this.checkedId = res.data.ids
              this.SelectId = res.data.ids
              for (var i in res.data.ids) {
                this.$refs.tree.setChecked(res.data.ids[i], true, false) //通过setChecked()方法回显
              }
            })
          }
        })
      },
      // 返回
      goBack() {
        this.$emit('showMain', 0)
      },
      preservation() {
        console.log(this.SelectId)

        const params = {
          id: this.datas.id,
          role_name: this.role_name,
          permissions: JSON.stringify(this.SelectId),
        }
        roleAdd(params).then(() => {
          this.goBack()
        })
      },

      handledeptNodeClick() {
        this.SelectId = this.$refs.tree
          .getCheckedKeys()
          .concat(this.$refs.tree.getHalfCheckedKeys())
        // this.SelectId = SelectedObj.checkedKeys.concat(
        //   SelectedObj.halfCheckedKeys
        // )
        console.log(this.SelectId)
      },
    },
  }
</script>

<style></style>
